import React, { useEffect, useState } from 'react'
import './WrjAuthenticated.less'
import axios from 'axios';
import request from '../../../utils/axios'
import { useSelector } from 'react-redux';

interface Person {
    _id: string,
    name: string,
    frontImg: string,
    backImg: string,
    status: boolean,
    documentType: string,
    idNumber: string
}

const Authenticated: React.FC = () => {
    const [peopleList, setPeopleList] = useState<Person[]>([])
    const {authentication}=useSelector((store:any)=>store.counter)

    const getpeople=async()=>{
        request.get('getPeople', { _id:authentication})
        .then(error => {
            console.log('GET error:', error);
        })
        .catch(response => {
            setPeopleList(response.data.peopleList)
        });
    }



    // 身份证加密
    function maskIdCard(idCard: string): string {
        if (idCard.length !== 18) {
            throw new Error('Invalid ID card number');
        }

        // 显示前6位和后4位，中间用星号替换
        const maskedIdCard = `${idCard.slice(0, 1)}**********${idCard.slice(-1)}`;
        return maskedIdCard;
    }

    useEffect(() => {
        if(authentication!=''){
            getpeople()
        }
    }, [])

    return (
        <div>
            {
                peopleList.map(item => {
                    return <div className='wrj-authenticated-realname'>
                        <p>
                            <span>认证状态：</span>
                            <span>{item.status ? '已认证' : '未认证'}</span>
                        </p>
                        <p>
                            <span>真实姓名：</span>
                            <span>{item.name}</span>
                        </p>
                        <p>
                            <span>证件类型：</span>
                            <span>{item.documentType}</span>
                        </p>
                        <p>
                            <span>证件号：&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span>{maskIdCard(item.idNumber)}</span>
                        </p>
                        <p>
                            <span>证件正面图：</span>
                            <span className='wrj-img' style={{ backgroundImage: `url(${item.frontImg})` }}></span>
                        </p>
                        <p>
                            <span>证件背面图：</span>
                            <span className='wrj-img' style={{ backgroundImage: `url(${item.backImg})` }}></span>
                        </p>
                    </div>
                })
            }
        </div>
    )
}

export default Authenticated